<template>
  <div>
    <div class="tuwen_box">
      <el-form label-width="120px">
        <el-form-item label="模块标题">
          <el-input
            v-model="active_component.propValue.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="模块样式">
          <div class="flex-around jz_box">
            <div
              class="jz-photo-group"
              :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
              @click="changetab(0)"
            >
              <div class="jz_style_img_0 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
              @click="changetab(1)"
            >
              <div class="jz_style_img_1 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="active_component.propValue.tabIndex == 2 ? 'group_active' : ''
              "
              @click="changetab(2)"
            >
              <div class="jz_style_img_2 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 3 ? 'group_active' : ''
              "
              @click="changetab(3)"
            >
              <div class="jz_style_img_3 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 4 ? 'group_active' : ''
              "
              @click="changetab(4)"
            >
              <div class="jz_style_img_4 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 5 ? 'group_active' : ''
              "
              @click="changetab(5)"
            >
              <div class="jz_style_img_5 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 6 ? 'group_active' : ''
              "
              @click="changetab(6)"
            >
              <div class="jz_style_img_6 jz_style_img"></div>
            </div>
          </div>
        </el-form-item>
         <el-form-item label="上传图片">
                       <!-- <Upload></Upload> -->
                    <div>
                    <img style="width:150px;height:auto;object-fit:contain;" v-if="active_component.propValue.img" :src="active_component.propValue.img" alt="">
                   <Upload :text="'上传图片'" @confrim="confrim" :type="'primary'"></Upload>
                    </div>
         </el-form-item>

           <el-form-item label="图片尺寸">
                       <!-- <Upload></Upload> -->
                       <div class="flex">
                              <div>宽度(px)
                                  <el-input  style="width:100px"  v-model="active_component.propValue.imgwidth" placeholder="请输入宽度"></el-input>
                            </div>
                            <div style="margin-left: 10px;">高度(px)
                                <el-input style="width:100px;" v-model="active_component.propValue.imgheight" placeholder="请输入高度"></el-input>
                            </div>
                       </div>
         </el-form-item>

        <div class="quill-wrap">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :default-config="toolbarConfig"
              :mode="mode"
            />
            <Editor
              v-model="active_component.propValue.content"
              style="height: 200px; overflow-y: hidden"
              :default-config="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </div>
      </el-form>
    </div>
    <div class="flex-center" style="margin-top:10px;">
      <el-button size="small" type="" @click="closeTK"
        >取消</el-button
      >
       <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import Upload  from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList","activeCompont"],
  components: { Editor, Toolbar ,Upload},
  data() {
    return {
      name: "",
      tabIndex: 0,
      active_component: {},
      editor: null,
      showdialog: false,
      dialogValue: "<p>32132131</p>",
      html: "",
      toolbarConfig: {
        excludeKeys: [
          "image", // 图片
          "video", // 视频
        ],
      },
      swiperList: [],
      swiperIndex: 0,
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onremove(){
           this.active_component.propValue.img=''
    },
    loadSuccess(res){
           this.active_component.propValue.img=res.data
    },
    confrim(e){
      this.active_component.propValue.img=e
    },
    closeTK(){
        this.$emit("closeTK")
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
  // console.log(this.$store.state.componentData)
      //从list中筛选出对应的jsan
    //   for (let key in this.componentList) {
    //     if (
    //       this.componentList[key].isDialog &&
    //       this.componentList[key].propValue.value == this.componentId
    //     ) {
    //       console.log(this.componentList[key]); //获取到对应组件数据
          // 进行添加缓存/vuex
        //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));

        //   canvasData.push(component);
          // localStorage.setItem("canvasData", JSON.stringify(canvasData));
        //   localStorage.setItem("canvasStyle", JSON.stringify(canvasStyle));
        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 600;

           this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
              Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    //     }
    //   }
    },
  },
};
</script>
<style>
.w-e-bar>div:nth-child(23),.w-e-bar>div:nth-child(24) {
  display: none;
}
</style>
<style lang="scss" scoped>
.tuwen_box {
  width: 300px;
  img {
    width: 100%;
  }
  .jz_box {
    width: 500px;
  }
  .jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
      width: 62px;
      height: 48px;
      background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_0 {
      background-position: -314px -3px;
    }
    .jz_style_img_1 {
      background-position: -314px -145px;
    }
    .jz_style_img_3 {
      background-position: -314px -74px;
    }
    .jz_style_img_2 {
      background-position: -314px -218px;
    }
    .jz_style_img_4 {
      background-position: -314px -288px;
    }
    .jz_style_img_5 {
      background-position: -314px -362px;
    }
    .jz_style_img_6 {
      background-position: -314px -431px;
    }
  }
}
.group_active {
  border: 1px solid #5874d8 !important;
  position: relative;
}
.group_active::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 24px;
  background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
.quill-wrap{
    width: 600px;
    margin: 0 auto;
    margin-left: 50px;
}
</style>

